<template>
  <view class="form">
    <view
      class="flex flex-items-center justify-between"
      :class="['form-item', item.formBottomBorder ? 'form-item-bottom-border' : '']"
      v-for="(item, index) in formData"
      :key="index"
    >
      <view class="form-item-left flex flex-items-center">
        <img
          class="form-item-left-img"
          v-if="item.showMoney"
          src="@/static/app/custom-icon/st-red-envelope.png"
          alt=""
        />
        <view class="form-item-left-text">{{ item.formLabel }}</view>
        <view class="form-item-left-text-must" v-if="item.formMust">（必填）</view>
      </view>
      <view class="form-item-right flex flex-items-center">
        <template v-if="item.formType === 'select'">
          <view class="form-item-right-text" :style="{ color: item.formValueColor || '#808080' }">
            {{ item.formValue || '' }}
          </view>
          <img src="@/static/images/home/ze-arrow.png" alt="" />
        </template>
        <template v-else-if="item.formType === 'input'">
          <view class="form-item-right-search">{{ item.formValue || '' }}</view>
        </template>

        <template v-else-if="item.formType === 'readOnlyText'">
          <view class="form-item-right-search-read-only">{{ item.formValue || '' }}</view>
        </template>

        <template v-else-if="item.formType === 'readOnlyTextBlack'">
          <view class="form-item-right-search-read-only-black">{{ item.formValue || '' }}</view>
        </template>

        <template v-else>
          <view class="form-item-right-money">{{ item.formValue || '' }}</view>
        </template>
      </view>
    </view>
    <view class="close flex flex-items-center" v-if="closeFlag">
      <img src="@/static/app/custom-icon/ze-cross.png" alt="" />
    </view>
  </view>
</template>

<script setup>
defineProps(['formData', 'closeFlag'])
</script>

<style scoped lang="scss">
.form {
  position: relative;
  width: 20.69rem;
  margin-bottom: 1.63rem;
  // overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 1rem;
  .close {
    position: absolute;
    top: 0.05rem;
    left: 0.15rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: red;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .form-item-bottom-border {
    border-bottom: 0.06rem solid rgba(187, 187, 187, 1);
  }
  .form-item {
    padding: 1.06rem 0.94rem 1.06rem 0.75rem;
    .form-item-left {
      .form-item-left-img {
        width: 1.81rem;
        height: 1.81rem;
        margin-right: 0.5rem;
      }
      .form-item-left-text {
        font-family: SourceHanSansSC-regular;
        font-size: 1rem;
        line-height: 1.44rem;
        color: rgba(0, 0, 0, 1);
      }
      .form-item-left-text-must {
        margin-left: 0.5rem;
        font-family: SourceHanSansSC-regular;
        font-size: 1rem;
        line-height: 1.44rem;
        color: red;
      }
    }
    .form-item-right {
      .form-item-right-text {
        font-family: SourceHanSansSC-regular;
        font-size: 1rem;
        line-height: 1.44rem;
        // color: #808080;
        text-align: left;
      }
      .form-item-right-search {
        width: 8.44rem;
        height: 1.88rem;
        font-family: SourceHanSansSC-regular;
        font-size: 0.75rem;
        line-height: 1.88rem;
        color: rgba(187, 187, 187, 1);
        text-align: center;
        background-color: rgba(242, 243, 247, 1);
        border-radius: 0.69rem;
      }
      .form-item-right-search-read-only {
        height: 1.56rem;
        font-family: SourceHanSansSC-regular;
        font-size: 1rem;
        line-height: 1.56rem;
        color: #9a9a9a;
      }

      .form-item-right-search-read-only-black {
        height: 1.56rem;
        font-family: SourceHanSansSC-regular;
        font-size: 1rem;
        line-height: 1.56rem;
        color: #333;
      }
      .form-item-right-money {
        margin-right: 1.06rem;
      }
    }
  }
}
</style>
